<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" @search="getTableData" @reset="handleReset" />

  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate :columns="columns" ref="tableRef" />

  <!-- 添加表单 -->
  <AllocationOrderAdd ref="addRef" @dataReload="getTableData" />

  <!-- 修改表单  -->
  <AllocationOrderEdit ref="editRef" @dataReload="getTableData" />

  <!-- 删除对话框  -->
  <AllocationOrderDelete ref="deleteRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SearchFormTemplate from '@/components/template/form/search-form-template.vue'; // 搜索区模版
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue'; // 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue'; //分页表格模版

  // import PayOrderAdd from '@/views/payorder/payorder_add.vue'; //模块添加页
  // import PayOrderEdit from '@/views/payorder/payorder_edit.vue'; //模块添加页
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  // const onAdd = () => {
  //   addRef.value?.show(); //调用子组件 显式弹窗方法
  // };
  // const addRef = ref<typeof PayOrderAdd | null>(null); //模块添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  // const onEdit = (id: number) => {
  //   editRef.value?.show(id); //调用子组件 显示 弹窗方法
  // };
  //  const editRef = ref<typeof PayOrderEdit | null>(null); //模块修改模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async (searchParams?: Record<string, any>) => {
    //合并搜索参数和页面参数
    const mergedParams = searchParams ? { ...pageParams, ...searchParams } : pageParams;
    await tableRef.value?.getTableData(pageAction, mergedParams);
  };
  // 重置后重新拉数据
  const handleReset = () => {
    // 重置表格数据到初始状态
    getTableData();
  };
  const tableRef = ref<typeof TableTemplate | null>(null); //table-template组件引用，用于执行组件内部方法
  const pageAction = 'base.manage.allocationorder.ServiceImpl.page'; //page数据 请求接口 方法名
  const pageParams = { account_type: '3' }; //page数据 请求参数,查询总后台模块

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  // const toolbarConfig = [
  //   {
  //     text: '新建',
  //     type: 'primary',
  //     icon: 'add' as const,
  //     permission: 'payorder_add',
  //     onClick: onAdd,
  //   },
  // ];

  /* [搜索配置] */
  const searchConfig = [
    { title: '名称', dataIndex: 'allocationorder_name', type: 'input' as const, width: 150 },
    { title: '创建时间', dataIndex: 'create_time', type: 'date-range' as const, width: 250 },
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    { title: '分账订单号', fixed: 'left', dataIndex: 'allocation_order_no', width: 150 },
    { title: '支付订单号', dataIndex: 'pay_order_no', width: 150 },
    { title: '订单金额', dataIndex: 'pay_amount' },
    { title: '实际分账金额', dataIndex: 'allocation_amount' },
    { title: '系统分账批次号', dataIndex: 'batch_order_id' },
    {
      title: '状态',
      dataIndex: 'allocation_status',
      width: 100,
      options: { 1: '待分账', 2: '分账成功', 3: '分账失败', 4: '分账已受理' },
    },
    { title: '分账接收账号', dataIndex: 'receiver_no', width: 250 },
    { title: '创建时间', dataIndex: 'create_time' },
    { title: '更新时间', dataIndex: 'update_time' },
    {
      title: '操作',
      dataIndex: 'action',
      // buttons: [
      //   {
      //     children: () => '修改',
      //     type: 'link',
      //     permission: 'payorder_edit',
      //     onClick: (record) => onEdit(record.pay_order_id),
      //   },
      // ],
    },
  ];
</script>
<style lang="less" scoped></style>
